<template>
	<div class="grid-layout-container">
		<el-card class="box-card">
			<template #header>
				<div class="homeQueryBox flex-startCenter">
					<span class="mr10 personal-edit-title">今日统计</span>
					<el-radio-group v-model="state.status" class="mr10">
						<el-radio-button :label="1">全部</el-radio-button>
						<el-radio-button :label="2">直营</el-radio-button>
						<el-radio-button :label="3">加盟</el-radio-button>
					</el-radio-group>
					<section class="width280">
						<DatePickerBox />
					</section>
				</div>
			</template>
			<section class="px10">
				<el-row :gutter="10" :span="24">
					<el-col :span="20">
						<el-row :gutter="10">
							<el-col :span="5" class="mb10">
								<div class="contentBox">
									<section class="personal-recommend">
										<section style="width: 48px; height: 48px;background:width">
											<el-image style="width: 48px; height: 48px;" :src="yyy"  />
										</section>
										<div class="personal-recommend-auto">
											<div class="font44">15,000,000.00</div>
											<div class="font16 ">营业额(元)</div>
										</div>
									</section>
									<el-popover
										title="昨日"
										:width="200"
										trigger="hover"
										content="昨日业绩500"
									>
										<template #reference>
											<div class="font14" style="width:100%;padding-right: 10px;
												line-height: 25px;display: flex; justify-content: space-between;">
												<section style="display: flex;align-items: center;">
													日环比：10% <el-icon style="color:#F73131"> <ele-CaretTop /> </el-icon>
												</section>
												<section style="display: flex;align-items: center;">
													月环比：10%
													<el-icon style="color:#0ebe98"> <ele-CaretBottom /> </el-icon>
												</section>
											</div>
										</template>
									</el-popover>
								</div>
							</el-col>

							<el-col :span="5" class="mb10">
								<div class="contentBox">
									<section class="personal-recommend">
										<section style="width: 48px; height: 48px;background:width">
											<el-image style="width: 48px; height: 48px;" :src="hkyj"  />
										</section>
										<div class="personal-recommend-auto">
											<div class="font44">15,000,000.00</div>
											<div class="font16 ">划卡业绩(元)</div>
										</div>
									</section>
									<el-popover
										title="昨日"
										:width="200"
										trigger="hover"
										content="昨日业绩500"
									>
									<template #reference>
											<div class="font14" style="width:100%;padding-right: 10px;
												line-height: 25px;display: flex; justify-content: space-between;">
												<section style="display: flex;align-items: center;">
													日环比：10% <el-icon style="color:#F73131"> <ele-CaretTop /> </el-icon>
												</section>
												<section style="display: flex;align-items: center;">
													月环比：10%
													<el-icon style="color:#0ebe98"> <ele-CaretBottom /> </el-icon>
												</section>
											</div>
										</template>
									</el-popover>
								</div>
							</el-col>

							
							<el-col :span="5" class="mb10">
								<div class="contentBox">
									<section class="personal-recommend">
										<section style="width: 48px; height: 48px;background:width">
											<el-image style="width: 48px; height: 48px;" :src="xhyj"  />
										</section>
										<div class="personal-recommend-auto">
											<div class="font44">15,000,000.00</div>
											<div class="font16 ">消耗业绩(元)</div>
										</div>
									</section>
									<el-popover
										title="昨日"
										:width="200"
										trigger="hover"
										content="昨日业绩500"
									>
									<template #reference>
											<div class="font14" style="width:100%;padding-right: 10px;
												line-height: 25px;display: flex; justify-content: space-between;">
												<section style="display: flex;align-items: center;">
													日环比：10% <el-icon style="color:#F73131"> <ele-CaretTop /> </el-icon>
												</section>
												<section style="display: flex;align-items: center;">
													月环比：10%
													<el-icon style="color:#0ebe98"> <ele-CaretBottom /> </el-icon>
												</section>
											</div>
										</template>
									</el-popover>
								</div>
							</el-col>

							<el-col :span="5" class="mb10">
								<div class="contentBox">
									<section class="personal-recommend">
										<section style="width: 48px; height: 48px;background:width">
											<el-image style="width: 48px; height: 48px;" :src="tk"  />
										</section>
										<div class="personal-recommend-auto">
											<div class="font44">15,000,000.00</div>
											<div class="font16 ">退款(元)</div>
										</div>
									</section>
									<el-popover
										title="昨日"
										:width="200"
										trigger="hover"
										content="昨日业绩500"
									>
									<template #reference>
											<div class="font14" style="width:100%;padding-right: 10px;
												line-height: 25px;display: flex; justify-content: space-between;">
												<section style="display: flex;align-items: center;">
													日环比：10% <el-icon style="color:#F73131"> <ele-CaretTop /> </el-icon>
												</section>
												<section style="display: flex;align-items: center;">
													月环比：10%
													<el-icon style="color:#0ebe98"> <ele-CaretBottom /> </el-icon>
												</section>
											</div>
										</template>
									</el-popover>
								</div>
							</el-col>

							<el-col :span="5" class="mb10">
								<div class="contentBox">
									<section class="personal-recommend">
										<section style="width: 48px; height: 48px;background:width">
											<el-image style="width: 48px; height: 48px;" :src="xzhy"  />
										</section>
										<div class="personal-recommend-auto">
											<div class="font44">15,000,000.00</div>
											<div class="font16 ">新增会员(人)</div>
										</div>
									</section>
									<el-popover
										title="昨日"
										:width="200"
										trigger="hover"
										content="昨日业绩500"
									>
									<template #reference>
											<div class="font14" style="width:100%;padding-right: 10px;
												line-height: 25px;display: flex; justify-content: space-between;">
												<section style="display: flex;align-items: center;">
													日环比：10% <el-icon style="color:#F73131"> <ele-CaretTop /> </el-icon>
												</section>
												<section style="display: flex;align-items: center;">
													月环比：10%
													<el-icon style="color:#0ebe98"> <ele-CaretBottom /> </el-icon>
												</section>
											</div>
										</template>
									</el-popover>
								</div>
							</el-col>
							<el-col :span="5">
								<div class="contentBox">
									<section class="personal-recommend">
										<section style="width: 48px; height: 48px;background:width">
											<el-image style="width: 48px; height: 48px;" :src="fwxm"  />
										</section>
										<div class="personal-recommend-auto">
											<div class="font44">15,000,000.00</div>
											<div class="font16 ">服务项目(次)</div>
										</div>
									</section>
									<el-popover
										title="昨日"
										:width="200"
										trigger="hover"
										content="昨日业绩500"
									>
									<template #reference>
											<div class="font14" style="width:100%;padding-right: 10px;
												line-height: 25px;display: flex; justify-content: space-between;">
												<section style="display: flex;align-items: center;">
													日环比：10% <el-icon style="color:#F73131"> <ele-CaretTop /> </el-icon>
												</section>
												<section style="display: flex;align-items: center;">
													月环比：10%
													<el-icon style="color:#0ebe98"> <ele-CaretBottom /> </el-icon>
												</section>
											</div>
										</template>
									</el-popover>
								</div>
							</el-col>
							<el-col :span="5">
								<div class="contentBox">
									<section class="personal-recommend">
										<section style="width: 48px; height: 48px;background:width">
											<el-image style="width: 48px; height: 48px;" :src="fwkl"  />
										</section>
										<div class="personal-recommend-auto">
											<div class="font44">15,000,000.00</div>
											<div class="font16 ">服务客流(人)</div>
										</div>
									</section>
									<el-popover
										title="昨日"
										:width="200"
										trigger="hover"
										content="昨日业绩500"
									>
									<template #reference>
											<div class="font14" style="width:100%;padding-right: 10px;
												line-height: 25px;display: flex; justify-content: space-between;">
												<section style="display: flex;align-items: center;">
													日环比：10% <el-icon style="color:#F73131"> <ele-CaretTop /> </el-icon>
												</section>
												<section style="display: flex;align-items: center;">
													月环比：10%
													<el-icon style="color:#0ebe98"> <ele-CaretBottom /> </el-icon>
												</section>
											</div>
										</template>
									</el-popover>
								</div>
							</el-col>

							<el-col :span="5">
								<div class="contentBox">
									<section class="personal-recommend">
										<section style="width: 48px; height: 48px;background:width">
											<el-image style="width: 48px; height: 48px;" :src="yyxm"  />
										</section>
										<div class="personal-recommend-auto">
											<div class="font44">15,000,000.00</div>
											<div class="font16 ">预约项目(次)</div>
										</div>
									</section>
									<el-popover
										title="昨日"
										:width="200"
										trigger="hover"
										content="昨日业绩500"
									>
									<template #reference>
											<div class="font14" style="width:100%;padding-right: 10px;
												line-height: 25px;display: flex; justify-content: space-between;">
												<section style="display: flex;align-items: center;">
													日环比：10% <el-icon style="color:#F73131"> <ele-CaretTop /> </el-icon>
												</section>
												<section style="display: flex;align-items: center;">
													月环比：10%
													<el-icon style="color:#0ebe98"> <ele-CaretBottom /> </el-icon>
												</section>
											</div>
										</template>
									</el-popover>
								</div>
							</el-col>
							<el-col :span="5">
								<div class="contentBox">
									<section class="personal-recommend">
										<section style="width: 48px; height: 48px;background:width">
											<el-image style="width: 48px; height: 48px;" :src="yykl"  />
										</section>
										<div class="personal-recommend-auto">
											<div class="font44">15,000,000.00</div>
											<div class="font16 ">预约客流(人)</div>
										</div>
									</section>
									<el-popover
										title="昨日"
										:width="200"
										trigger="hover"
										content="昨日业绩500"
									>
										<template #reference>
											<div class="font14" style="width:100%;padding-right: 10px;
												line-height: 25px;display: flex; justify-content: space-between;">
												<section style="display: flex;align-items: center;">
													日环比：10% <el-icon style="color:#F73131"> <ele-CaretTop /> </el-icon>
												</section>
												<section style="display: flex;align-items: center;">
													月环比：10%
													<el-icon style="color:#0ebe98"> <ele-CaretBottom /> </el-icon>
												</section>
											</div>
										</template>
									</el-popover>
								</div>
							</el-col>
							<el-col :span="5">
								<div class="contentBox">
									<section class="personal-recommend">
										<section style="width: 48px; height: 48px;background:width">
											<el-image style="width: 48px; height: 48px;" :src="yfykl"  />
										</section>
										<div class="personal-recommend-auto">
											<div class="font44">15,000,000.00</div>
											<div class="font16">应赴约客流(人)</div>
										</div>
									</section>
									<el-popover
										title="昨日"
										:width="200"
										trigger="hover"
										content="昨日业绩500"
									>
										<template #reference>
											<div class="font14" style="width:100%;padding-right: 10px;
												line-height: 25px;display: flex; justify-content: space-between;">
												<section style="display: flex;align-items: center;">
													日环比：10% <el-icon style="color:#F73131"> <ele-CaretTop /> </el-icon>
												</section>
												<section style="display: flex;align-items: center;">
													月环比：10%
													<el-icon style="color:#0ebe98"> <ele-CaretBottom /> </el-icon>
												</section>
											</div>
										</template>
									</el-popover>
								</div>
							</el-col>
						</el-row>
					</el-col>
					<el-col :span="4">
						<div>
							<div class="flex-startCenter" style="height: 28px;">
								<span class="mr10 personal-edit-title">收银方式</span>
							</div>
							<PieChart :height="218" :data="state.data" /> 
						</div>
					</el-col>
				</el-row>
			</section>
		</el-card>
	</div>
</template>

<script setup lang="ts" name="funGridLayout">
import { reactive, defineAsyncComponent} from 'vue';
const PieChart = defineAsyncComponent(() => import('/@/views/home/components/Pie.vue'));
import yyy from '/@/assets/images/yyy.png?url';
import hkyj from '/@/assets/images/hkyj.png?url';
import xhyj from '/@/assets/images/xhyj.png?url';
import tk from '/@/assets/images/tk.png?url';
import xzhy from '/@/assets/images/xzhy.png?url';
import fwxm from '/@/assets/images/fwxm.png?url';
import fwkl from '/@/assets/images/fwkl.png?url';
import yyxm from '/@/assets/images/yyxm.png?url';
import yykl from '/@/assets/images/yykl.png?url';
import yfykl from '/@/assets/images/yfykl.png?url';
import rising from '/@/assets/svg/rising.svg?url';
import falling from '/@/assets/svg/falling.svg?url';
const state = reactive({
	status:1,
	data: {
		tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
          position: "bottom",
        },
		legend: {
			bottom: '-1%',
			left: 'center',
			right: 'center',
		},
		series: [
			{
				name: '支付占比',
				type: 'pie',
				radius: ["40%", "68%"],
				center: ['50%', '40%'],
				avoidLabelOverlap: false,
				label: {
					normal: {
						show: false,
						position: "center",
						formatter: "总计:{c}",
					},
					emphasis: {
						show: true,
						textStyle: {
						fontSize: "16",
						fontWeight: "bold",
						},
					},
					},
					labelLine: {
					show: false,
				},
				data:[
					{ value: 30, name: '现金支付' },
					{ value: 30, name: '微信支付' },
					{ value: 30, name: '美团核销' },
					{ value: 30, name: '美团核销' },
				]
			},
		],
	}
});

</script>
<style scoped lang="scss">
.grid-layout-container {
	.box-card :deep(.el-card__header){
		padding: 10px 10px !important;
	}
	.box-card :deep(.el-card__body){
	}
	.box-card :deep(.el-card__body){
		padding: 0px !important;
	}
	.personal-edit-title {
		position: relative;
		padding-left: 10px;
		color: var(--el-text-color-regular);
		line-height: 22px;
		&::after {
			content: '';
			width: 4px;
			height: 18px;
			line-height: 22px;
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			background: var(--el-color-primary);
			border-radius: 2px;
		}
	}
}
.contentBox{
	display: flex;
	justify-content: flex-start;
	flex-direction: column;
	align-items: flex-start;
	background-color: var(--el-color-info-light-9);
	// border:1px solid #
	// box-shadow:0 0 0 1px var(--el-input-border-color,var(--el-border-color)) inset;
	height: 120px;
	border-radius: 3px;
	padding-left: 10px;
	overflow: hidden;
	cursor: pointer;
	color: var(--el-text-color-regular);
	.personal-recommend {
		width: 100%;
		height: 90px;
		display: flex;
		align-items: center;
		.personal-recommend-auto {
			display: flex;
			width:100%;
			flex-direction: column;
			align-items: start;
			padding-top:15px;
			div{
				font-family: 'CUTI';
				text-align: center;
				width:100%;
			}
		}
	}
}
:deep(.el-col-5) {
	width: 20%;
	flex: 0 0 20%;
}
</style>
